<template>
  <div class="main-container">
    <BarCharts1 />
    <BarCharts2 />
    <BarCharts3 />
    <PieCharts />
    <PieCharts2 />
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import BarCharts1 from "@/components/BarCharts1.vue";
import BarCharts2 from "@/components/BarCharts2.vue";
import BarCharts3 from "@/components/BarCharts3.vue";
import PieCharts from "@/components/PieCharts.vue";
import PieCharts2 from "@/components/PieCharts2.vue";

onMounted(() => {});
</script>
<style lang="less" scoped>
.main-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.container {
  height: 300px;
  border: 1px solid orange;
}
</style>
